<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchForm, SearchTable } from '@fl/components'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { cloneDeep } from 'lodash-es'
import { useGetContractList } from '@fl/api/mall-api'

const props = defineProps({
    id: {
        type: String,
        default: '',
    },
    isSupplier: {
        type: Boolean,
        default: false,
    },
    isAdmin: {
        type: Boolean,
        default: false,
    },
})

const emits = defineEmits(['confirm'])

const { push } = useRouter()

const visible = defineModel<boolean>('visible', { required: true })

const initialState = {
    agreementName: '',
    partyB: '',
}

const state = ref(cloneDeep(initialState))

const columns = computed(() => {
    return [

        {
            label: '协议名称',
            prop: 'agreementName',
        },
        {
            label: '乙方',
            prop: 'partyB',
        },
    ]
})

const tableRef = ref()

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}

const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => {
    return {
        ...state.value,
        agreementType: 1,
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
        status: 4,
    }
})

const { data, isLoading } = useGetContractList(params)

const tableData = ref<any[]>([])

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { type: 'seq', title: '序号', width: 50 },
        { field: 'agreementCode', title: '协议编号' },
        { field: 'agreementName', slots: { default: 'agreementName' }, title: '协议名称' },
        { field: 'partyA', title: '甲方' },
        { field: 'partyB', title: '乙方' },
        { field: 'initiationTime', title: '发起时间' },
        { slots: { default: 'opreate' }, title: '操作', width: 100 },
    ],
    rowConfig: {
        keyField: 'skuId',
    },
    maxHeight: 600,
})

function onCancelBtnClick() {
    visible.value = false
}

function handleSelect(row: any) {
    emits('confirm', row)
    visible.value = false
}

function submitSearch(values) {
    state.value = cloneDeep(values)
    tablePage.value.currentPage = 1
}

function resetSearch() {
    state.value = cloneDeep(initialState)
    tablePage.value = cloneDeep(initialPage)
}

function showAgreement(row: any) {
    if (props.isAdmin) {
        push(`/operations-pages/operations-order-management/sign-agreen/sign-agreen?id=${row.id}`)
        return
    }
    if (props.isSupplier) {
        push(`/supplier-pages/order-management/sign-agreen?id=${row.id}`)
        return
    }
    push(`/purchase-pages/purchase-order-management/sign-agreen?id=${row.id}`)
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

watchEffect((() => {
    if (data.value) {
        tableData.value = cloneDeep(data.value?.records || [])
        tablePage.value.total = data.value.total ?? 0
    }
}))
</script>

<template>
    <PlusDialog v-model="visible"
                title="选择协议"
                width="1300"
                close-on-press-escape
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="搜索"
                    @reset="resetSearch"
                    @submit="submitSearch"
        />

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="tablePage"
                     :seq-config="{ startIndex: (tablePage.currentPage - 1) * tablePage.pageSize }"
                     :loading="isLoading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #agreementName="{ row }">
                <ElButton text
                          type="primary"
                          @click="showAgreement(row)"
                >
                    {{ row.agreementName }}
                </ElButton>
            </template>

            <template #opreate="{ row }">
                <ElButton text
                          type="primary"
                          :disabled="props.id === row.id"
                          @click="handleSelect(row)"
                >
                    {{ props.id === row.id ? '已选择' : '选择' }}
                </ElButton>
            </template>
        </SearchTable>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="onCancelBtnClick">
                    关闭
                </el-button>
            </div>
        </template>
    </PlusDialog>
</template>
